<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Java 文档搜索引擎</title>
</head>
<body>
<div class="container">
    <div class="header">
        <input type="text">
        <button onclick="search()">搜索</button>
    </div>
    <div class="result">
<!--        <div class="item">-->
<!--        <a href="#">我是标题</a>-->
<!--        <div class="desc">我是描述</div>-->
<!--        <div class="url">我是 url</div>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--        <a href="#">我是标题</a>-->
<!--        <div class="desc">我是描述</div>-->
<!--        <div class="url">我是 url</div>-->
<!--        </div> &ndash;&gt;-->
    </div>
</div>
<!--设置样式-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    /* 要把 html, body 都设置成 100% ⾼度, 才能和浏览器窗⼝⼀样⾼ */
    html,
    body {
        height: 100%;
    }
    body {
        background-image: url("background.png");
        /*设置背景图不平铺*/
        background-repeat: no-repeat;
        /*设置背景图位置*/
        background-position: center center;
        /*设置背景图大小*/
        background-size: cover;
    }
    .container {
        width: 800px;
        /* 让⾼度和⻚⾯⼀样⾼ */
        height: 100%;
        /*设置水平居中*/
        margin: 0 auto;
        /*设置文字与边框的边距*/
        padding: 10px;
        /*设置背景色，让版心和背景图区分开*/
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 20px;
        overflow: auto;
    }
    .header {
        width: 100%;
        height: 50px;
    }
    .header input {
        /* input 总宽度为 700px, 掉 10px padding, 4px 左右边框, 还剩 686px */
        float: left;
        width: 600px;
        height: 36px;
        font-size: 18px;
        padding-left: 10px;
    }
    .header button {
        float: left;
        width: 100px;
        height: 40px;
        color: #fff;
        background-color: #bf6cd7;
        font-size: 18px;
    }
    .header button:active {
        background-color: grey;
    }
    .item {
        width: 100%;
        margin-top: 16px;
    }
    .item a {
        display: block;
        font-size: 20px;
        height: 40px;
        line-height: 40px;
        font-weight: 700;

        color: cornflowerblue;
    }
    .item .desc {
        font-size: 14px;
    }
    .item .url {
        font-size: 14px;
        color: rgb(0, 128, 0);
        font-style: normal;
    }
    /*实现查询词标红*/
    .item .desc .i {
        color: red;
    /*    去掉样式*/
        font-style: normal;
    }
    .result .total{
        color: grey;
        margin-top: 10px;
    }

</style>
<script src = js/jquery.js></script>
<script>
    function search(){
        let query = document.querySelector('header input').values();
        $.ajax({
            type: 'Get',
            url: 'searcher?query=' + query,
            success : function (data, status){
                buildResult(data);
            }
        });
    }
    function buildResult(data){
        data = JSON.parse(data);
        let result = document.querySelector('.result');
        // 先清空原本的元素
        result.innerHTML = '';
        let total = document.createElement('div');
        total.className = 'total';
        total.innerHTML = '共找到结果:' + data.length + '条!';
        result.appendChild(total);
        for(let item of data.result) {
            let itemHtml = document.createElement('div');
            itemHtml.className = 'item';
            let title = document.createElement('a');
            title.innerHTML = item.title;
            title.href = item.url;
            title.target = '_blank';
            itemHtml.appendChild(title);

            let desc = document.createElement('div');
            desc.className = 'desc';
            desc.innerHTML = item.desc;
            itemHtml.appendChild(desc);

            let url = document.createElement('div');
            url.innerHTML = item.url;
            url.className = 'url';
            itemHtml.appendChild(url);

            result.appendChild(itemHtml);
        }
    }
</script>
</body>
</html>